<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.wrapper .content {
				display: none;
				width: 100px;
				height: 100px;
				border: 2px solid red;
			}
			
			.active {
				background-color: yellow;
			}
		</style>
	</head>

	<body>
		<!--<div></div>-->

		<!--<div class="wrapper">
			<button>1</button>
			<button>2</button>
			<button>3</button>
			<div class="content">chengge</div>
			<div class="content">dengge</div>
			<div class="content">XXXXX</div>
		</div>-->

		<script type="text/javascript">
			/*
			 * 1.DOM doucment Object Model
			 * 2.DOM定义了表示和修改文档所需的方法
			 * DOM对象即为宿主对象，有浏览器厂商定义，用来操作
			 * html和xml功能的一类对象的集合。也有人称DOM是对HTML
			 * 以及XML的标准编程接口
			 * 操作css的行间样式
			 */

			//dom对象
			/*var div = document.getElementsByTagName('div')[0];
			div.style.width = "100px";
			div.style.height = "100px";
			div.style.backgroundColor = "red";
			var count = 0;
			div.onclick = function(){
				if(count % 2 == 1){
					this.style.backgroundColor = "red";
				}else{
					this.style.backgroundColor = "green";
				}
				count++;
			}*/

			/*var btn = document.getElementsByTagName('button');
			var div = document.getElementsByClassName('content');
			for (var i = 0; i < btn.length; i++) {
				(function(n){
					btn[n].onclick = function(){
					for (var j = 0; j < btn.length; j++) {
						btn[j].className = "";
						div[j].style.display = "none";
					}
					this.className = "active";
					div[n].style.display = "block";
				}
				}(i));
			}*/

			/*var div = document.createElement('div');
			document.body.appendChild(div);
			div.style.width = "100px";
			div.style.height = "100px";
			div.style.backgroundColor = "red";
			div.style.position = "absolute";
			div.style.left = "0";
			div.style.top = "0";*/
			/*var timer = setInterval(function(){
				div.style.left = parseInt(div.style.left) + 1 + "px";
				if(parseInt(div.style.left) > 500){
					clearInterval(timer);
				}
			},10)*/

			/*document.onkeydown = function(e) {
				switch(e.which) {
					case 38:
						div.style.top = parseInt(div.style.top) - 5 + "px";
						break;
					case 40:
						div.style.top = parseInt(div.style.top) + 5 + "px";
						break;
					case 37:
						div.style.left = parseInt(div.style.left) - 5 + "px";
						break;
					case 39:
						div.style.left = parseInt(div.style.left) + 5 + "px";
						break;
				}
			}*/
		</script>
	</body>

</html>